import React, { useState, useEffect, useRef } from 'react';
import { Input, Button } from 'antd';
import ThingItem from '@/components/Item';
import styles from './index.module.less';
import { STATUS } from '@/config/status';

function TodoList () {
    const [list, setList] = useState([]);
    const [inputValue, setInputValue] = useState('');
    // const list = [{
    //     value: 'aaa',
    //     isFinish: false,
    //     id: 1
    // }, {
    //     value: 'bbb',
    //     isFinish: false,
    //     id: 2
    // }];

    useEffect(() => {
        console.log('list变化了', list);
    }, [list]);

    const stateChange = (index, type) => {
        console.log(index, type);
        setList((list) => {
            if (type === 'done') {
                list[index].statue = STATUS.IS_DONE;
            } else if (type === 'delete') {
                list[index].statue = STATUS.IS_DELETE;
            }
            return [...list];
        });
    }

    const setItem = (value) => {
        value = value || inputValue;
        if (!value) return;
        setList((list) => {
            const isHave = list.find(item => item.value === value);
            if (isHave) {
                console.log('已存在');
            } else {
                list.unshift({
                    value: value,
                    statue: STATUS.IS_CREATE,
                    id: Math.random()
                });
                setInputValue('');
            }
            return isHave ? list : [...list];
        });
    }
    return (
        <div className={styles['todo-list-container']}>
            <h2 className={styles['todo-title']}>代办清单</h2>
            <div className={styles['todo-input']}>
                <Input value={inputValue} allowClear={true} placeholder="Basic usage" onPressEnter={event => {setItem(event.target.value)}} onChange={(event) => {
            setInputValue(event.target.value)}} />
                <Button size="large" type="primary" onClick={() => setItem()}>提交</Button>
            </div>
            
            <div className={styles["list-stage"]}>
                {
                    list.map((item, index) => {
                        return <ThingItem key={item.id} itemData={item} index={index} stateChange={stateChange}></ThingItem>
                    })
                }
            </div>
        </div>
    );
}


export default TodoList;